<template>
  <div class="register_container">
    <myHead></myHead>
    <div class="login_container">
      <div class="nav">
        <span>首页</span>
        >
        <span>我的</span>
        >
        <span>注册</span>
      </div>
      <div class="verUserInfo">
        <div class="phone">
          <input type="text" placeholder="请输入手机号码">
          <button>发送验证码</button>
        </div>
        <input type="password" placeholder="请输入短信中的验证码">
        <input type="password" placeholder="请输入新密码">
        <div class="bottom">
          <a href="javascript:;">立即注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHead from '@/components/myHead.vue'

export default {
  components: {
    myHead
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
  background-color: rgb(245, 245, 245);
}
.register_container{
  .login_container {
    .nav {
      background-color: #fff;
      height: (37/@vw);
      font-size: (12/@vw);
      padding-left: (16/@vw);
      border-bottom: 1px solid rgb(197, 197, 197);

      span {
        line-height: (37/@vw);

        &:first-child {
          font-weight: 700;
        }
      }
    }

    .verUserInfo {
      .input {
        padding-left: (14/@vw);
        margin-top: 1px;
        width: 100%;
        height: (43/@vw);
        border: none;
        border-bottom: 1px solid rgb(197, 197, 197);
        outline: none;
      }

      .phone {
        position: relative;

        input {
          .input();
        }

        button {
          position: absolute;
          top: (6/@vw);
          right: (16/@vw);
          width: (82/@vw);
          height: (32/@vw);
          border: 1px solid rgb(220, 220, 220);
          background-color: #fff;
          font-size: (12/@vw)
        }
      }

      >input {
        .input();
      }

      .bottom {
        padding: 0px (10/@vw);
        margin-top: (14/@vw);

        >a {
          display: block;
          width: 100%;
          height: (48/@vw);
          background-color: @color;
          text-align: center;
          line-height: (48/@vw);
          color: #fff;
          font-size: (16/@vw);
        }
      }
    }
  }
}
</style>
